<template>
	<view>
		<map style="width: 750rpx; height: 70vh;" id="map" :longitude="longitude" :latitude="latitude" scale="15"
			:markers="markers" :polyline="polyline"></map>
		<!-- <div id="map"></div> -->
		<view class="bottomcontent ffffff " v-if="pageShow">
			<!-- <view class="flexaround flexrow">
				<text class="lable2" :class="tabs==1?'itemfocus2':''" @click="tabs=1">一键叫车</text>
				<text class="lable2" :class="tabs==2?'itemfocus2':''" @click="tabs=2">电话叫车</text>
				<text class="lable2" :class="tabs==3?'itemfocus2':''" @click="tabs=3">代叫/代驾</text>
				<text class="lable2" :class="tabs==4?'itemfocus2':''" @click="tabs=4">顺风车</text>
			</view> -->
			<!-- <view class="flexcenter titletext bold bai_text mainpadding	"
				style="background-color: #42b155;border-radius: 10rpx 10rpx 0 0;">确认路线</view> -->
			<view class="mainpadding" style="padding: 10rpx 20rpx;">
				<view class="flexcenter margin_top2" style="align-items: flex-end;">
					<view class="main_size bold hei_text">大概{{dataAll.distance}}km，预计</view>
					<view class="main_size bold hong_text">$</view>
					<view class="titletext bold hong_text" style="font-size: 50rpx;line-height: 50rpx;">
						{{dataAll.pay_price}}
					</view>

				</view>
				<view class="margin_top2 pdl flexleft">
					<view class="dian margin_right"></view>
					<view class="main_size lan_text bold">起点：<text class="main_size hei_text">{{start_address}}</text>
					</view>
				</view>
				<view class="margin_top1 pdl flexleft">
					<view class="dian margin_right"></view>
					<view class="main_size lan_text bold">目的地：<text class="main_size hei_text">{{end_address}}</text>
					</view>
				</view>
				<view class="margin_top1 pdl flexleft">
					<view class="dian margin_right"></view>
					<view class="main_size lan_text bold">出发时间：<text class="main_size hei_text">{{cf_time}}</text>
					</view>
				</view>
				<view class="margin_top1 pdl flexleft">
					<view class="dian margin_right"></view>
					<view class="flexbetween" style="width: 100%;">
						<view class="main_size lan_text bold">手机号：<text class="main_size hei_text">{{ccr_mobile}}</text>
						</view>
						<view class="main_size lan_text bold">{{type==1?"代驾":"顺风车"}}</view>
					</view>
				</view>
				<view class="submitbtn margin_top" @click="jiaoche">预定</view>
			</view>
		</view>
	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")
	// const QQMapWX = require('@/common/qqmap-wx-jssdk.js');
	export default {
		data() {
			return {
				latitude: "",
				longitude: "",
				markers: [],
				start_longitude: "", //出发地经纬度
				start_latitude: "",
				end_longitude: "", //目的地经纬度
				end_latitude: "",
				start_address: "", //出发地地址
				end_address: "", //目的地地址
				cf_time: "",
				ccr_mobile: "",
				type: 1, //1代驾。2顺丰车
				dataAll: {},
				pageShow: false,
				polyline: [], // 路线
				qqmapsdk: {},
				to: { // 目的地坐标
					latitude: '',
					longitude: '',
				},
				map: null,
				directionsRenderer: null //地图画线
			}
		},
		onLoad(options) {
			// this.qqmapsdk = new QQMapWX({
			// 	key: 'HBRBZ-AHTE3-RFH3J-35KAR-VJBTV-ZBFZD' // 自己申请的key值
			// })
			let data = JSON.parse(decodeURIComponent(options.msg))
			this.start_longitude = data.start_longitude //出发地经纬度
			this.start_latitude = data.start_latitude
			this.end_longitude = data.end_longitude //目的地经纬度
			this.end_latitude = data.end_latitude
			this.to = {
				latitude: data.end_latitude,
				longitude: data.end_longitude,
			}
			this.start_address = data.start_address //出发地地址
			this.end_address = data.end_address //目的地地址
			this.cf_time = data.cf_time
			this.ccr_mobile = data.ccr_mobile
			this.type = data.type
			this.init()
			// this.getlocation()
		},
		mounted() {
			let map = document.querySelector('#map')
			console.log(map, "0000");
			this.initMap()
		},
		methods: {
			initMap() {
				var coords = {
					lat: Number(this.start_latitude),
					lng: Number(this.start_longitude)
				}
				// navigator.geolocation.getCurrentPosition(function(position) {
				// 	coords = {
				// 		lat: position.coords.latitude,
				// 		lng: position.coords.longitude
				// 	};
				// 	// lats = position.coords.latitude;
				// 	// lngs = position.coords.longitude
				// });
				console.log(coords, "9999");
				this.map = new google.maps.Map(document.getElementById('map'), {
					zoom: 5,
					center: coords,
					mapId: "AIzaSyBWV3jTHOXj7c13ndr4qN2brBzFSNrZiDE",
					animation: 'BOUNCE',
				});
				this.drawRoute();
			},
			drawRoute() {
				// 随机数字而已  动态数字  方便查询效果
				// let min = 5000;
				// let max = 10000;
				// let randomNum = (Math.floor(Math.random() * (max - min + 1)) + min) / 500000;
				// 起点坐标
				// const origin = {
				// 	lat: 34.7382820208 + randomNum,
				// 	lng: 113.64360881345 + randomNum
				// };
				// // 终点坐标
				// const destination = {
				// 	lat: 34.78194 + randomNum,
				// 	lng: 113.622512 + randomNum
				// };
				const origin = {
					lat: Number(this.start_latitude),
					lng: Number(this.start_longitude)
				};
				// 终点坐标
				const destination = {
					lat: Number(this.end_latitude),
					lng: Number(this.end_longitude)
				};
				this.directionsRenderer = new google.maps.DirectionsRenderer({
					map: this.map,
					suppressMarkers: true, // 关闭默认图标
					polylineOptions: {
						strokeColor: "#42b155", //设置路线颜色
						strokeWeight: 5 //设置路线宽度
					}
				});
				const directionsService = new google.maps.DirectionsService();
				const request = {
					origin: origin,
					destination: destination,
					travelMode: google.maps.TravelMode.DRIVING,
				};
				directionsService.route(request,
					(result, status) => {
						if (status === "OK") {
							this.directionsRenderer.setDirections(result);
							this.directionsRenderer.setMap(this.map);
							// 获取起点和终点的信息并添加标记
							const startMarker = new google.maps.Marker({
								position: result.routes[0].legs[0].start_location,
								map: this.map,
								icon: {
									url: "../../static/image/system/start.png",
									// url: "https://maps.gstatic.com/mapfiles/ms2/micons/pink.png",
									scaledSize: new google.maps.Size(35, 35),
								},
							});
							const endMarker = new google.maps.Marker({
								position: result.routes[0].legs[0].end_location,
								map: this.map,
								icon: {
									url: "../../static/image/system/address.png",
									// url: "https://maps.gstatic.com/mapfiles/ms2/micons/orange.png",
									scaledSize: new google.maps.Size(50, 50),
								},
							});
						}
					}
				);
			},
			init() {
				httpRequest.request('/api/order/orderSure', 'GET', {
					start_longitude: this.start_longitude,
					start_latitude: this.start_latitude,
					end_latitude: this.end_latitude,
					end_longitude: this.end_longitude
				}, false, false, true).then(res => {
					if (res.code == 1) {
						this.dataAll = res.data
						this.pageShow = true
					} else {
						httpRequest.toast(res.msg);
					}
				}).catch(err => {
					httpRequest.toast(err.msg);
				})
			},
			getlocation() {
				let that = this
				uni.getLocation({
					type: 'gcj02',
					geocode: true,
					success: function(res) {
						that.latitude = res.latitude
						that.longitude = res.longitude
						that.getmarkers()
					},
					fail(err) {
						console.log(err, "错误");
					}
				});
			},
			getmarkers() {
				let arr = [{
					id: 12,
					latitude: this.latitude,
					longitude: this.longitude,
					iconPath: '../../static/image/system/start.png',
					width: 40,
					height: 40,
				}, {
					id: 13,
					latitude: this.end_latitude,
					longitude: this.end_longitude,
					iconPath: '../../static/image/system/address.png',
					width: 40,
					height: 40,
				}]
				// arr.push()
				this.markers = JSON.parse(JSON.stringify(arr))
			},
			jiaoche() {
				let data = {
					start_longitude: this.start_longitude, //出发地经纬度
					start_latitude: this.start_latitude,
					end_longitude: this.end_longitude, //目的地经纬度
					end_latitude: this.end_latitude,
					start_address: this.start_address, //出发地地址
					end_address: this.end_address, //目的地地址
					cf_time: this.cf_time,
					ccr_mobile: this.ccr_mobile,
					type: this.type
				}
				httpRequest.request('/api/order/callCart', 'GET', data, false, false, true).then(res => {
					if (res.code == 1) {
						uni.redirectTo({
							url: "/pages/index/start"
						})
					} else {
						httpRequest.toast(res.msg);
					}
				}).catch(err => {
					httpRequest.toast(err.msg);
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.pdl {
		padding-bottom: 10rpx;
		border: none;
		/* border-bottom: 1rpx solid rgba(0, 0, 0, .03); */
		// border-width: 1rpx;
		// border-style: solid;
		// border-top-color: #fff;
		// border-left-color: #fff;
		// border-right-color: #fff;
		// border-bottom-color: rgba(0, 0, 0, .03);
	}

	.textcenter {
		text-align: center;
	}

	/* 提交按钮 */
	.submitbtn {
		width: 100%;
		background-color: #42b155;
		border-radius: 50rpx;
		text-align: center;
		color: #fff;
		padding: 20rpx 0;
	}

	.lan_text {
		color: #42b155;
	}

	.main_size {
		font-size: 28rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
	}

	.bold {
		font-weight: bold;
	}

	.margin_right {
		margin-right: 30rpx;
	}

	.flexbetween {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.flexleft {
		display: flex;
		align-items: center;
	}

	.flexright {
		display: flex;
		align-items: center;
		justify-content: flex-end;
	}

	.flexaround {
		display: flex;
		justify-content: space-around;
		align-items: center;
	}

	.ffffff {
		background-color: #fff;
	}

	.flexrow {
		flex-direction: row;
	}

	.bottomcontent {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		z-index: 1000;
		border-radius: 20rpx 20rpx 0 0;
	}

	.lable2 {
		width: 150rpx;
		height: 50rpx;
		line-height: 50rpx;
		color: #999;
		font-size: 26rpx;
		text-align: center;
	}

	.itemfocus2 {
		background-color: #42b155;
		border-radius: 50rpx;
		color: #ffffff !important;
	}

	.dian {
		width: 20rpx;
		height: 20rpx;
		min-width: 20rpx;
		min-height: 20rpx;
		background-color: #42b155;
		border-radius: 50rpx;
	}
</style>